<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="box1">
        <div class="content">
            <ul class="clear">
                <div id="one" width='100'>水电费</div>
                <div id="two" width='200'>消息称</div>
                <div id="three" width='300px'>从VB你</div>
                <li>
                    <span>嘻嘻哈哈</span>
                </li>
                <li class="uu1" id="lol">2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li class="lol">6</li>
            </ul>
            <div id="bottom">
                <div id="left">
                    <div id="right" class="jj">
                        <input type="text" name="myname" value="" placeholder="">
                        <input type="password" name="ee" value="" placeholder="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--  
        eq(index)            过滤出指定的某个
        first()              过滤出首个
        last()               过滤出最后一个
        filter(selector)     过滤出满足条件的那个
        not(selector)        过滤出不满足条件的那个 过滤排除
        slice(start, end)    截取指定的一部分JQDOM
        has(selector)        过滤出含有选择器 所匹配的元素 的元素

        hasClass()           判断前面的集合中 是否有包含某个类
        is()                 判断前面的集合中 是否有元素 符合指定的条件
        map()                相当于对JQDOM进行遍历,并取出一部分值出来
    -->
    <script>
        $(function(){
            // 过滤所有li, 找出 索引是 2 的li 
            $('li').eq('2').css('background','red')

            // 过滤所有li, 找出第一个li
            $('li').first().css('background','yellow')

            // 过滤所有li, 找出最后一个li
            $('li').last().css('background','lightgreen')

            // 过滤出满足 索引为1 的li
            $('li').filter(':eq(1)').css('border','2px solid blue')

            // 过滤所有li, 除了索引为1 的li, 其他的li都受影响
            $('li').not(':eq(1)').css('padding','22px')

            // 过滤所有li, 从索引为1开始, 到索引为3,
            $('li').slice(1,3).css('border','12px solid black')

            // 过滤所有li, 里面有span这个标签, 这个li就会被匹配出来
            $('li').has('span').css('border','5px solid green')

            // 过滤所有li, 如果class 是 uu1 的, 就返回true, 有一个不满足就返回false
            console.log($('li').hasClass('.uu1'))
            console.log($('li').hasClass('.uu1,.uu2,.uu3'))

            // 过滤所有li, 如果有一个class 是 uu1 的, 就返回true, 只要存在一个就返回true
            console.log($('li').is('.uu1,.uu2,.uu3'))

            // 遍历出li
            console.log($('li').map(function(){
                return $(this).text()
            }))

        })
    </script>
</body>
</html>